import { h, init } from 'snabbdom'

import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'
// 2. 注册模块
let patch = init([
    style,
    eventlisteners
])

// 页面容器
let app = document.querySelector('#app')

// 原始数据
let data = [...Array(10).keys()].map(i => (
    {
        i: i+1,
        content: i+1 + '--' + Math.ceil(Math.random() * 10) + '',
        time: Date.now()
    }
))
// 保存 vnode
let vnode = initVnode(data);

// 首次渲染
patch(app, vnode);

// 得到页面需要渲染的 vnode
function initVnode(data) {
    return h('div', {
        style: {
            width: '100%',
            color: '#fff',
            backgroundColor: '#000'
        }
    }, [
        h('div', 'Top 10 movies'),
        h('span', { style: { 'marginRight': '20px' } }, 'sort by: '),
        h('span', { style: { 'marginRight': '20px' } }, 'Rank'),
        h('span', { style: { 'marginRight': '20px' } }, 'Title'),
        h('span', 'Description'),
        h('div', {
            style: {
                'float': "right"
            },
            on: {
                click: add
            }
        }, 'Add'),
        h('table', { style: { 'width': '100%' } }, [
            h('tr', [
                h('th', { style: { 'width': '30%' } }, '序号'),
                h('th', { style: { 'width': '30%' } }, '内容'),
                h('th', { style: { 'width': '30%' } }, '添加时间')
            ]),
            h('tbody', trTd(data))
        ])
    ]
    );
}


// 添加
function add() {
    let length = data.length;
    let obj = {
        i: length+1,
        content: length+1 + '--' + Math.ceil(Math.random() * 10) + '',
        time: Date.now()
    };
    data.push(obj)
    render(data)
}

// 数据
function trTd(arr) {
    console.log(arr)
    return arr.map((item) => (
        h('tr', {
            style: {
                'textAlign': 'center',
            }
        }, [
            h('td', item.i),
            h('td', item.content),
            h('td', item.time)
        ])
    ))
}

// 数据改变，再次渲染
function render(data) {
    vnode = patch(vnode, initVnode(data))
}
